<!-- 编辑弹窗 -->
<template>
  <el-dialog
    :title="isUpdate?'修改车辆信息':'修改车辆信息'"
    :visible="visible"
    width="860px"
    :destroy-on-close="true"
    :lock-scroll="false"
    @open="init"
    @update:visible="updateVisible">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="92px">
      <el-row>
        <el-col :lg="12" :md="12">
          <el-form-item label="车辆编号:">
            <el-input
              clearable
              disabled
              v-model="form.carid"
              placeholder=""/>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :md="12">
          <el-form-item label="车牌号码:">
            <el-input
              clearable
              disabled
              v-model="form.carcode"
              placeholder=""/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :lg="12" :md="12">
          <el-form-item label="温湿设备1:">
            <el-input
              clearable
              v-model="form.hotdeviceid1"
              placeholder=""/>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :md="12">
          <el-form-item label="温湿设备2:">
            <el-input
              clearable
              v-model="form.hotdeviceid2"
              placeholder=""/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :lg="12" :md="12">
          <el-form-item label="Gps设备:">
            <el-input
              clearable
              v-model="form.gpsdeviceid"
              placeholder=""/>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :md="12">
          <el-form-item label="类型:">
            <el-select size="mini"
                       clearable
                       v-model="form.type"
                       placeholder="请选择"
                       class="ele-fluid">
              <el-option label="箱式货车" value="0"></el-option>
              <el-option label="冷藏车" value="1"></el-option>
              <el-option label="保温箱冷藏" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :lg="12" :md="12">
          <el-form-item label="吨位:">
            <el-input
              clearable
              v-model="form.weight"
              placeholder=""/>
          </el-form-item>
        </el-col>
        <el-col :lg="10" :md="12">
          <el-form-item label="颜色:">
            <el-input
              clearable
              v-model="form.memo1"
              placeholder=""/>
          </el-form-item>
        </el-col>
        <el-col :lg="2" :md="12" style="padding-top: 5px">
            <el-color-picker v-model="form.memo1"></el-color-picker>
        </el-col>
      </el-row>
      <el-row>
        <el-col :lg="12" :md="12">
          <el-form-item label="承运单位:">
            <el-input
              clearable
              v-model="form.memo2"
              placeholder=""/>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :md="12">
          <el-form-item label="备注:">
            <el-input
              clearable
              v-model="form.memo3"
              placeholder="输入备注说明"/>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button
        type="primary"
        @click="save"
        :loading="loading">保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import {mapGetters} from "vuex";
import elColorPicker from 'el-color-picker'

export default {
  name: 'TransVehicleEdit',
  components:{elColorPicker},
  computed: {
    ...mapGetters(["permission"]),
  },
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  data() {
    return {
      // 表单数据
      form: Object.assign({}, this.data),
      // 表格列配置
      columns: [
        {
          columnKey: 'selection',
          type: 'selection',
          width: 45,
          align: 'center'
        },
        {
          prop: 'pruchinvoiceid',
          label: '编号',
          showOverflowTooltip: true,
          minWidth: 100,
          align: 'left'
        },
        {
          prop: 'zxspbm',
          label: '统编代码',
          showOverflowTooltip: true,
          minWidth: 160,
          align: 'center',
          slot:'tbdm'
        },
        {
          prop: 'scph',
          label: '生产批号',
          showOverflowTooltip: true,
          minWidth: 80,
          align: 'center',
          slot:'scph'
        },
        //   {
        //   columnKey: 'action',
        //   label: '操作',
        //   width: 160,
        //   align: 'center',
        //   resizable: false,
        //   slot: 'action',
        //   fixed: "right"
        // }
      ],
      // 表单验证规则
      rules: {
        invcode: [
          {required: true, message: '请输入', trigger: 'blur'}
        ],
        hsl: [
          {required: true, message: '请输入', trigger: 'blur'}
        ],
      },
      invList:[],
      selection:[],
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
    };
  },
  watch: {
    data() {
      if (this.data) {
        this.form = Object.assign({}, this.data);
        this.isUpdate = true;
      } else {
        this.form = {};
        this.isUpdate = false;
      }
    }
  },
  methods: {
    /*打开窗口是加载明细*/
    init(){
      if(!this.isUpdate){
        this.form.id=0;
      }
    },
    addList(){
      let item={pruchinvoiceid:'',zxspbm:'',scph: ''};
      this.invList.push(item);

    },
    delList(){
      if(this.invList.length==0) return;
      if(this.selection.length==0){
        this.$message.error('请选择一条需要删除的明细');
        return;
      }
      this.invList.splice(this.invList.findIndex((t) => t.zxspbm === this.selection[0].zxspbm && t.scph === this.selection[0].scph), 1);

    },
    /* 保存编辑 */
    save() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$http.post('/transmanage/savecarinfo', this.form).then(res => {
            this.loading = false;
            if (res.data.code === 0) {
              this.$message.success(res.data.msg);
              if (!this.isUpdate) {
                this.form = {};
              }
              this.updateVisible(false);
              this.$emit('done');
            } else {
              this.$message.error(res.data.msg);
            }
          }).catch(e => {
            this.loading = false;
            this.$message.error(e.message);
          });
        } else {
          return false;
        }
      });
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    }
  }
}
</script>

<style scoped>
.el-row
{
  margin-bottom: 0px;
}
</style>
